{% extends "remotesupport/base.html" %}
{% load i18n %}

{% block extrahead %}
<script type="text/javascript">
function update_status(){
    var defer;
    
    defer = loadJSONDoc('get/running');
    
    var gotStatus = function(running){
	if (running){
	    $('disconnect').disabled = false;
	    //style.visibility = '';
	    $('connect').disabled = true;
	    //.style.visibility = 'hidden';
	} else {
	    $('connect').disabled = false;
	    //.style.visibility = ''
	    $('disconnect').disabled = true;
	    //.style.visibility = 'hidden';
	}
    }

    var err = function(){}
    defer.addCallbacks(gotStatus, err);
}


function update_log(){
    var defer;
    
    defer = loadJSONDoc('get/log');
    var gotLog = function(log){
	var p;
	p=$('log');
	p.innerHTML = log.log;
    }
    
    var errLog = function(){
    }
    
    defer.addCallbacks(gotLog, errLog);
}


function register_disconnect(){
    $('disconnect').onclick = function(){
	    var defer;
	    defer = loadJSONDoc('stop');

	    var gotReply = function(){
		update_log();
		update_status();
	    }
	    var gotErr = function(){}
	    defer.addCallbacks(gotReply, gotErr);
    }
}

addLoadEvent(register_disconnect);

addLoadEvent(update_log)
setInterval("update_log()", 10000); // update each 10 seconds

addLoadEvent(update_status);
setInterval("update_status()", 1000) // update each second

</script>
{% endblock %}


{% block content %}

<div class="content-main">
    <div class="inner">
	<form method="post" action="">
	    {{ redirect_form.management_form }}
	    <table>
		{{ host_form }}
	    </table>
	    <table style="border:1;">
		<colgroup span="20" width="20%">
		<colgroup span="20" width="20%">
		<colgroup span="20" width="20%">
		<thead>
		    {% for field in redirect_form.forms.0 %}
			<td><label>{{ field.label }}</label></td>
		    {% endfor %}
		</thead>
		<tbody>
		    {% for form in redirect_form.forms %}
			<tr>
			    {% for field in form %}
				<td>{{ field }}</td>
			    {% endfor %}
			</tr>
		    {% endfor %}
		</tbody>
	    </table>
	    <input id="connect" type="submit" value="{% trans "Connect" %}"/> 
	    <input type="button" id="disconnect" type="submit" value="{% trans "Disconnect" %}"/> 
	</form>
    </div>
</div>

<div class="content-main">
    <div class="inner">
	<div class="settings">
	<fieldset>
	    <legend>{% trans "Log" %}</legend>
	    <pre id="log" class="inner">{{ log }}</pre>
	</fieldset>
	</div>
    </div>
</div>

{% endblock %}
